<template>
  <div>
    <Card dis-hover :bordered="false">
      <!-- <Button type="primary" class="ivu-mb-16" @click="handleAdd">新增</Button> -->
      <Table highlight-row :columns="columns" :data="list" :loading="loading">
        <template slot="list" slot-scope="{ row }">
          <tag v-for="item in row.list" :value="item.id" :key="item.id">{{
            item.status_name
          }}</tag>
        </template>
        <template slot="action" slot-scope="{ row, index }">
          <a
            v-hasC="{
              name: '-v1-marketing-consume-update-channel-type',
              flag: '/v1/marketing/consume/update-channel-type',
            }"
            @click="handleEdit(row)"
            >编辑</a
          >
        </template>
      </Table>
    </Card>
    <Modal
      :loading="creating"
      title="编辑"
      width="600"
      :mask-closable="false"
      v-model="createModal"
      @on-ok="ok"
    >
      <Form
        :model="formData"
        :label-width="100"
        ref="create"
        :rules="createRules"
      >
        <FormItem label="类型名称:" prop="name">
          <Input v-model="formData.name" disabled />
        </FormItem>
        <FormItem label="描述:">
          <Input
            v-model="formData.describe"
            type="textarea"
            placeholder="请输入"
          />
        </FormItem>
        <FormItem label="选项:" prop="options">
          <draggable :list="formData.options" :move="checkMove">
            <transition-group>
              <div v-for="(item, index) in formData.options" :key="1 + index">
                <div
                  style="display: flex;justify-content: space-between;padding-right: 30px;box-sizing: border-box;"
                >
                  <div v-if="item.status === 1">{{ item.value }}</div>
                  <Input
                    v-else
                    v-model="item.value"
                    type="textarea"
                    :autosize="true"
                    style="width: 300px;margin-right: 15px;"
                  />
                  <div slot="extra" v-if="item.is_builtin !== '1'">
                    <a
                      @click="editItem(index)"
                      :class="item.value === '' ? 'disabled' : null"
                      >{{ item.status === 1 ? "编辑" : "完成" }}</a
                    >
                    <Divider type="vertical" />
                    <a @click="handleDeleteOption(index, item)">删除</a>
                  </div>
                </div>
                <Divider />
              </div>
            </transition-group>
          </draggable>
        </FormItem>
        <FormItem prop="inputValue">
          <Input
            v-width="290"
            v-model="formData.inputValue"
            placeholder="请输入"
          />
          <Button
            :disabled="formData.inputValue.replace(/\s*/g, '') === ''"
            class="ivu-ml-8"
            @click="handleAddOption"
            >+添加</Button
          >
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  getCommonStatus,
  delateCommonTag,
  editCommonTag,
} from "../../../api/TApi/index.js";
import draggable from "vuedraggable";
export default {
  components: { draggable },
  data() {
    const validateOptions = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error("至少添加一个选项"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      type: "",
      createModal: false,
      isEdit: "",
      creating: true,
      addEdit: true,
      formData: {
        name: "线索类型",
        inputValue: "",
        apiName: "",
        describe: "",
        options: [],
      },
      createRules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "change",
          },
        ],
        options: [{ validator: validateOptions, required: true }],
      },
      columns: [
        {
          title: "名称",
          key: "type_name",
          width: 108,
          fixed: "left",
        },
        {
          title: "描述",
          key: "desc",
          minWidth: 180,
        },
        {
          title: "选项",
          slot: "list",
          minWidth: 360,
        },
        {
          title: "操作",
          slot: "action",
          width: 90,
          fixed: "right",
        },
      ],
      list: [],
    };
  },
  computed: {},
  methods: {
    checkMove(ev) {
      this.formData.options = ev.relatedContext.list;
    },
    _getCommonStatus() {
      getCommonStatus().then((res) => {
        this.list = res;
      });
    },
    ok() {
      this.$refs.create.validate((valid) => {
        if (valid) {
          let status_list = this.formData.options.map((ee, index) => {
            return {
              status_name: ee.value,
              id: ee.id ? ee.id : "0",
              sort: index,
            };
          });
          editCommonTag({
            type: this.type,
            desc: this.formData.describe,
            status_list,
          }).then((res) => {
            this._getCommonStatus();
            this.creating = false;
            this.$Message.success("编辑成功");
            this.createModal = false;
          });
        }
      });
    },
    editItem(index) {
      if (this.formData.options[index].status === 0) {
        if (this.formData.options[index].value === "") {
          return false;
        } else {
          this.formData.options[index].status = 1;
        }
      } else {
        this.formData.options[index].status = 0;
      }
    },
    handleEdit(data) {
      this.isEdit = data;
      this.type = data.type;
      this.formData.name = data.type_name;
      this.formData.describe = data.desc;
      this.formData.options = data.list.map((ee) => {
        return {
          ...ee,
          status: 1,
          value: ee.status_name,
        };
      });
      this.formData.inputValue = "";
      this.createModal = true;
    },
    handleAddOption() {
      this.formData.options.push({
        value: this.formData.inputValue,
        status: 1,
      });
      this.formData.inputValue = "";
    },
    handleDeleteOption(index, item) {
      let params = {
        type: this.isEdit.type,
        status_id: item.id,
      };
      if (!item.id) {
        this.$Modal.confirm({
          title: "操作提示",
          content: "确认删除该选项？",
          onOk: () => {
            this.formData.options.splice(index, 1);
          },
        });
      } else {
        delateCommonTag(params).then((res) => {
          this.$Modal.confirm({
            title: "操作提示",
            content: "确认删除该选项？",
            onOk: () => {
              this.formData.options.splice(index, 1);
            },
          });
        });
      }
    },
  },
  created() {
    this._getCommonStatus();
  },
};
</script>
<style lang="less" scoped>
.disabled {
  color: #787878;
  cursor: not-allowed;
}
.ivu-divider-horizontal {
  margin: 10px 0 !important;
}
/deep/.ivu-form-item {
  max-height: 400px;
  overflow: auto;
}
/*滚动条样式*/
.ivu-form-item::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.ivu-form-item::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.ivu-form-item::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
